import SMSLogin from "./Components/SMSLogin";

import { Button, Col, Form, Input, Row } from "antd";
import IconMap from "@/components/IconMap";
import React, { useState } from "react";
import FormItem from "antd/es/form/FormItem";
import logoImg from "@/common/img/logo.svg";
import { history } from "umi";
import ComfirmPassword from "./Components/ComfirmPassword";

export type ComponentType = {
  type: number;
  Input: any;
  FormItem: any;
  form: any;
};

const ForgetPassword = () => {
  const [type, setType] = useState(0);

  const [form] = Form.useForm();

  function finishChange(val: any) {
    if (type == 1) {
      history.push("/users/login");
      setType(0);
      return;
    }
    setType(1);
  }

  //组件选择
  const selectComponent = (props: ComponentType) =>
    props.type !== 1 ? <SMSLogin {...props} /> : <ComfirmPassword {...props} />;

  return (
    <div className="w-full h-screen bg-[#eeeeee] flex justify-center items-center">
      <div className=" bg-white flex  flex-col justify-center  login-card   px-20  shadow-sm ">
        {/* 头 */}
        <div className="flex justify-center items-center gap-4 mb-10  ">
          <img src={logoImg} alt="" className="w-10" />
          <span className="font-bold text-2xl bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">
            {type !== 1 ? "忘记密码" : "重置为新密码"}
          </span>
        </div>

        <Form form={form} onFinish={finishChange}>
          {selectComponent({ type, Input, FormItem, form })}
          <Row>
            {type !== 1 ? (
              <Button
                type="primary"
                block
                className="mb-10"
                onClick={() => {
                  form.submit();
                }}
              >
                下一步
              </Button>
            ) : (
              <Button
                type="primary"
                block
                className="mb-10"
                onClick={() => form.submit()}
              >
                重置
              </Button>
            )}
          </Row>
          <Row
            className="cursor-pointer text-gray-500"
            justify="center"
            onClick={() => {
              history.back();
              setType(0);
            }}
          >
            <Col>返回上一步骤</Col>
          </Row>
        </Form>
      </div>
    </div>
  );
};

export default ForgetPassword;
